<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改教学物品')" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-class-edit" th:object="${sysClass}">
            <input id="id" name="id" th:field="*{id}" type="hidden">
            <input id="tenantId2" name="tenantId2" th:field="*{tenantId}" type="hidden">
            <input type="hidden" id="dates" name="dates"/>
            <input type="hidden" id="courseId" name="courseId" th:value="${sysClass.course.id}"/>

            <input type="hidden" id="time1" name="time1"/>
            <input type="hidden" id="time2" name="time2"/>
            <input type="hidden" id="time3" name="time3"/>
            <input type="hidden" id="time4" name="time4"/>
            <input type="hidden" id="tempDate" name="tempDate"/>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label is-required">课程名称：</label>
                        <div class="col-xs-8">
                            <button type="button" class="btn btn-w-m btn-primary" onclick="selectCourse()" >选择</button>
                            <span id="courseName" style="color: red;" th:text="${sysClass.course.name}"></span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label is-required">课次：</label>
                        <div class="col-xs-8">
                            <input id="courseNum" th:field="*{courseNum}" placeholder="请填写课次" class="form-control" type="text" maxlength="5" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label is-required">班级名称：</label>
                        <div class="col-xs-8">
                            <input name="name" th:field="*{name}" placeholder="请输入班级名称" class="form-control" type="text" maxlength="100" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label is-required">班级类型：</label>
                        <div class="col-xs-8">
                            <select name="classTypeId" id="classTypeId" required class="form-control">
                                <option value="">请选择</option>
                                <option th:each="t : ${classTypeList}" th:selected="${t.id eq sysClass.classTypeId}" th:text="${t.name}" th:value="${t.id}"></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label is-required">所属年份：</label>
                        <div class="col-xs-8">
                            <select name="years" id="years" th:field="*{years}"  required class="form-control">
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label is-required">所属学期：</label>
                        <div class="col-xs-8">
                            <select name="semesterId" id="semesterId" required class="form-control">
                                <option value="">请选择</option>
                                <option th:each="t : ${semesterList}"  th:selected="${t.id eq sysClass.semesterId}" th:text="${t.name}" th:value="${t.id}"></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">任课老师：</label>
                        <div class="col-sm-8">
                            <select name="teacherId" id="teacherId" required class="form-control">
                                <option value="">请选择</option>
                                <option th:each="t : ${teacherList}" th:selected="${t.userId eq sysClass.teacherId}"  th:text="${t.userName}" th:value="${t.userId}"></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">班主任：</label>
                        <div class="col-sm-8">
                            <select name="headmasterId" id="headmasterId" required class="form-control" >
                                <option value="">请选择</option>
                                <option th:each="t1 : ${teacherList}" th:selected="${t1.userId eq sysClass.headmasterId}" th:text="${t1.userName}" th:value="${t1.userId}"></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label is-required">计划招生：</label>
                        <div class="col-xs-8">
                            <input  th:field="*{planStuNum}" id="planStuNum" placeholder="请输入预计招生人数" class="form-control" type="text" maxlength="5" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label is-required">上课教室：</label>
                        <div class="col-xs-8">
                            <select name="classRoomId" id="classRoomId" required class="form-control" >
                                <option value="">请选择</option>
                                <option th:each="t1 : ${classRoomList}"  th:selected="${t1.id eq sysClass.classRoomId}" th:text="${t1.name}" th:value="${t1.id}"></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label is-required">排课时间：</label>
                        <div class="col-xs-8">
                            <label><input type="radio" checked="" th:field="*{planClassType}" value="0" id="planClassType1" name="planClassType" onclick="selectClassType()">&nbsp;按日期 &nbsp;&nbsp;</label>
                            <label><input type="radio" value="1" th:field="*{planClassType}" id="planClassType2" name="planClassType" onclick="selectClassType()">&nbsp;待定</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label" id="tempBtn"><button type="button" class="btn btn-w-m btn-primary" onclick="selectDate()" >选择日期</button></label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 table-striped">
                    <!--<table id="bootstrap-table"></table>-->
                    <table  class="table table-bordered" lay-filter="parse-table-demo" id="tempTable">
                        <thead>
                        <tr>
                            <th lay-data="{field:'username', width:200}">日期</th>
                            <th lay-data="{field:'joinTime', width:200}">上课时段</th>
                            <th lay-data="{field:'sign', minWidth: 180}"> <button type="button" class="btn btn-w-m btn-primary" onclick="selectTime()" >批量设置上课时段</button></th>
                        </tr>
                        </thead>
                        <tbody id="tempDateBody">
                        <tr>
                            <td colspan="3" style="text-align: center;" >暂无数据</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-offset-5 col-sm-10">
                    <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                    <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <script type="text/javascript">

        $(function() {
            selectClassType();
            var type = $("input[name='planClassType']:checked").val();
            if (type == 0) {
                loadEditDate();
            }
        })

        function loadEditDate() {
            var id =  $("#id").val();
            $.ajax({
                type: "POST",
                url: "/teach/class/loadEditDate",
                data: {id, id},
                async: false,
                success: function(data) {
                    if (data && data != null) {
                        $("#tempDateBody").empty();
                        var tempDates = "";
                        for(var i in data) {
                            var classDate = data[i].classDate;
                            tempDates += classDate + ",";
                            var beginTime1 = data[i].beginTime1;
                            var beginTime2 = data[i].beginTime2;
                            var endTime1 = data[i].endTime1;
                            var endTime2 = data[i].endTime2;
                            var fullTime = data[i].fullTime;
                            $("#tempDateBody").append("<tr><td class='theTempClassDate'>" + classDate + "</td><td><span class='tempClassTime' id=\"" + classDate + "\">" + fullTime + "</span>" +
                                "<span class='theTempTime1' style='display: none;'>" + beginTime1 + "</span>" +
                                "<span class='theTempTime2' style='display: none;'>" + beginTime2 + "</span>" +
                                "<span class='theTempTime3' style='display: none;'>" + endTime1 + "</span>" +
                                "<span class='theTempTime4' style='display: none;'>" + endTime2 + "</span>" +
                                "</td>" +
                                "<td> <button type=\"button\" class=\"btn btn-w-m btn-info\" onclick=\"selectTime('" + classDate + "')\" >设置上课时段</button></td></tr>");
                        }
                        $("#dates").val(tempDates);
                    }
                }
            })
        }

        jQuery.validator.addMethod("minNumber",function(value, element){
            var returnVal = true;
            inputZ=value;
            var ArrMen= inputZ.split(".");    //截取字符串
            if(ArrMen.length==2){
                if(ArrMen[1].length>2){    //判断小数点后面的字符串长度
                    returnVal = false;
                    return false;
                }
            }
            return returnVal;
        }, "小数点后最多为两位");

        var prefix = ctx + "teach/class"
        $("#form-class-edit").validate({
            onkeyup: false,
            rules:{
                name:{
                    remote: {
                        url: ctx + "teach/class/checkNameUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            "name" : function() {
                                return $.common.trim($("#name").val());
                            },
                            "id" : function() {
                                return $.common.trim($("#id").val());
                            }
                        },
                        dataFilter: function(data, type) {
                            return $.validate.unique(data);
                        }
                    }
                },
                standardCoursePrice: {
                    required: true,    //要求输入不能为空
                    number: true,     //输入必须是数字
                    min: 0.01,          //输入的数字最小值为0.01，不能为0或者负数
                    minNumber: $("#standardCoursePrice").val()    //调用自定义验证
                },
                standardClass:{
                    digits:true
                },
                priceFloatUp:{
                    digits:true
                },
                priceFloatDown:{
                    digits:true
                }
            },
            messages: {
                "name": {
                    remote: "名称已存在！"
                },
                "standardCoursePrice": {
                    required: "请填写标准课次单价",
                    number: "请正确输入数值",
                    min: "输入最小数值为0.01",
                    length: "输入数字最多小数点后两位"
                }
            },
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var formData =  $("#form-class-edit").serializeArray();
                //将序列化数据转为对象
                var formObject = {};
                for (var item in formData) {
                    formObject[formData[item].name] = formData[item].value;
                }
                var arr = new Array($("#tempDateBody").find("tr").length);
                $("#tempDateBody").find("tr").each(function(i) {
                    var classDate = $(this).find(".theTempClassDate").text();
                    var beginTime1 = $(this).find(".theTempTime1").text();
                    var beginTime2 = $(this).find(".theTempTime2").text();
                    var endTime1 = $(this).find(".theTempTime3").text();
                    var endTime2 = $(this).find(".theTempTime4").text();
                    var fullTime = beginTime1  + ":" + beginTime2 + "-" + endTime1  + ":" + endTime2;
                    formObject['classTimes[' + i + '].classDate'] = classDate;
                    formObject['classTimes[' + i + '].beginTime1'] = beginTime1;
                    formObject['classTimes[' + i + '].beginTime2'] = beginTime2;
                    formObject['classTimes[' + i + '].endTime1'] = endTime1;
                    formObject['classTimes[' + i + '].endTime2'] = endTime2;
                    formObject['classTimes[' + i + '].fullTime'] = fullTime;
                })
                $.operate.save(prefix + "/edit", formObject);
            }
        }

        // 加载选中课程
        function chooseCourseIds(courseId, courseName, courseNum) {
            $("#courseId").val(courseId);
            $("#courseName").html(courseName);
            $("#courseNum").val(courseNum);
        }

        // 加载选中日期
        function chooseDates(dates) {
            $("#dates").val(dates);
            $("#tempDateBody").empty();
            var arr = dates.split(',');
            for (let i = 0; i < arr.length; i++) {
                if (arr[i]) {
                    $("#tempDateBody").append("<tr><td class='theTempClassDate'>" + arr[i] + "</td><td><span class='tempClassTime' id=\"" + arr[i] + "\"></span>" +
                        "<span class='theTempTime1' style='display: none;'></span>" +
                        "<span class='theTempTime2' style='display: none;'></span>" +
                        "<span class='theTempTime3' style='display: none;'></span>" +
                        "<span class='theTempTime4' style='display: none;'></span>" +
                        "</td>" +
                        "<td> <button type=\"button\" class=\"btn btn-w-m btn-info\" onclick=\"selectTime('" + arr[i] + "')\" >设置上课时段</button></td></tr>");
                }
            }
        }

        // 加载选中时间
        function chooseTimes(tempDate, time1, time2, time3, time4) {
            // $("#time1").val(time1);
            // $("#time2").val(time2);
            // $("#time3").val(time3);
            // $("#time4").val(time4);
            var times = time1 + ":" + time2 + "-" + time3 + ":" + time4;
            if (!tempDate || tempDate == 'undefined' || tempDate == undefined) {
                $(".theTempTime1").html(time1);
                $(".theTempTime2").html(time2);
                $(".theTempTime3").html(time3);
                $(".theTempTime4").html(time4);
                $(".tempClassTime").html(times);
            } else {
                $("#" + tempDate).parent().find(".theTempTime1").html(time1);
                $("#" + tempDate).parent().find(".theTempTime2").html(time2);
                $("#" + tempDate).parent().find(".theTempTime3").html(time3);
                $("#" + tempDate).parent().find(".theTempTime4").html(time4);
                $("#" + tempDate).html(times);
            }
        }

        function selectCourse() {
            var url = prefix +  "/searchCourse?ids=" + $("#courseId").val();
            $.modal.open("选择课程", url);
        }

        function selectDate() {
            var url = prefix +  "/selectDate?dates=" + $("#dates").val();
            $.modal.open("选择日期", url);
        }

        function selectTime(tempDate) {
            var url = prefix +  "/selectTime";
            if (tempDate) {
                var time1= $("#" + tempDate).parent().find(".theTempTime1").html();
                // console.log("time1 =======" + time1);
                var time2= $("#" + tempDate).parent().find(".theTempTime2").html();
                var time3= $("#" + tempDate).parent().find(".theTempTime3").html();
                var time4= $("#" + tempDate).parent().find(".theTempTime4").html();
                url += "?time1=" + time1 + "&time2=" + time2 +
                    "&time3=" + time3 + "&time4=" + time4 + "&tempDate=" + tempDate;
            }
            $.modal.open("设置上课时段", url);
        }

        function selectClassType() {
            var type = $("input[name='planClassType']:checked").val();
            if (type == 0) {
                $("#tempBtn").show();
                $("#tempTable").show();
            } else {
                $("#tempBtn").hide();
                $("#tempTable").hide();
            }
        }
    </script>
</body>
</html>